<template>
  <div class="dp-index">
    <nav-header></nav-header>
    <div class="sf-box">
        <div class="sf-left">
            <div v-for="(item,index) in listData" :key="index" class="module" :style="getModuleStyle(index)" @click="changeActive(index)">
              <img v-if="activeInx==index" :src="require(`../../assets/images/as${index}.png`)" alt="">
              <img v-else  :src="require(`../../assets/images/s${index}.png`)" alt="">
            </div>
        </div>
        <div class="sf-right">
          <div class="sf-title">{{ listData[activeInx] }}</div>
          <div class="sf-item" v-for="(item,index) in details[activeInx]" :key="index">
            <div class="sf-label"><span></span>{{ item.name }}</div>
            <div class="sf-value">{{ item.value }} <span>{{ item.unit }}</span></div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import navHeader from "./components/navHeader.vue";
export default {
  name: "algorithm1",
  components: {
    navHeader,
  },
  data() {
    return {
      listData:['人工智能模型','气候模型','风力模型','力学模型','地理模型'],
      activeInx:0,
      positions: [
        { x: 750, y: 80 },   // 模块 1 的位置
        { x: 750, y: 320 }, // 模块 2 的位置
        { x: 200, y: 400 }, // 模块 3 的位置
        { x: 100, y: 200 }, // 模块 4 的位置
        { x: 200, y: 0 },  // 模块 5 的位置
      ],
      timeOut: null,
      details:[
        [{name:'DeepSeek',value:'打开',unit:''},{name:'ChatGPT',value:'打开',unit:''},{name:'通义千问(阿里)',value:'打开',unit:''},{name:'智谱清言(清华)',value:'打开',unit:''},{name:'豆包(字节)',value:'打开',unit:''},],
        [{name:'温度',value:'30',unit:'°C'},{name:'湿度',value:'12',unit:'%'},{name:'气压',value:'10',unit:'pa'},{name:'降水量',value:'3',unit:'mm'},{name:'积雪深度',value:'9',unit:'mm'},{name:'积雪覆盖率',value:'10',unit:'%'}],
        [{name:'风向',value:'东',unit:''},{name:'风速',value:'12',unit:'m/s'},{name:'空气密度',value:'10',unit:'kg/m³'},{name:'湍流强度',value:'弱',unit:''}],
        [{name:'质量',value:'1',unit:'g'},{name:'位置坐标',value:'12.92,45.821',unit:''},{name:'外力',value:'10',unit:'N'},{name:'外力矩',value:'9',unit:'N.m'}],
        [{name:'海拔高度',value:'1234',unit:'m'},{name:'地形坡度',value:'12',unit:'°'},{name:'地表粗糙度',value:'10',unit:''},{name:'地形坡向',value:'南',unit:''}]
      ]
    };
  },
  computed: {
    
  },
  mounted() {
    this.timeOut = setInterval(() => {
      this.updatePositions()
    },10000)
  },
  beforeDestroy() {
    clearTimeout(this.timeOut)
  },
  methods: {
    // 更新模块位置
    updatePositions() {
      this.activeInx++
      if(this.activeInx==5){
        this.activeInx=0
      }
      const lastElement = this.positions.pop(); // 移除最后一个元素
      this.positions.unshift(lastElement); // 将最后一个元素添加到开头
    },
    // 计算每个模块的样式
    getModuleStyle(index) {
      const { x, y } = this.positions[index];
      return {
        left: `${x}px`,
        top: `${y}px`,
        transition: 'left 2s, top 2s' // 平滑过渡效果
      };
    },
    changeActive(index) {
      this.activeInx = index;
      clearTimeout(this.timeOut)
      this.timeOut = null
      if(index==0){
        this.positions = [// 初始数组
          { x: 750, y: 80 },   // 模块 1 的位置
          { x: 750, y: 320 }, // 模块 2 的位置
          { x: 200, y: 400 }, // 模块 3 的位置
          { x: 100, y: 200 }, // 模块 4 的位置
          { x: 200, y: 0 },  // 模块 5 的位置
        ]
      }else if(index==1){
        this.positions = [// 初始数组
          { x: 200, y: 0 },  // 模块 5 的位置
          { x: 750, y: 80 },   // 模块 1 的位置
          { x: 750, y: 320 }, // 模块 2 的位置
          { x: 200, y: 400 }, // 模块 3 的位置
          { x: 100, y: 200 }, // 模块 4 的位置
        ]
      }else if(index==2){
        this.positions = [
          { x: 100, y: 200 }, // 模块 4 的位置
          { x: 200, y: 0 },  // 模块 5 的位置
          { x: 750, y: 80 },   // 模块 1 的位置
          { x: 750, y: 320 }, // 模块 2 的位置
          { x: 200, y: 400 }, // 模块 3 的位置
        ]
      }else if(index==3){
        this.positions =[
          { x: 200, y: 400 }, // 模块 3 的位置
          { x: 100, y: 200 }, // 模块 4 的位置
          { x: 200, y: 0 },  // 模块 5 的位置
          { x: 750, y: 80 },   // 模块 1 的位置
          { x: 750, y: 320 }, // 模块 2 的位置
        ]
      }else if(index==4){
        this.positions =[
          { x: 750, y: 320 }, // 模块 2 的位置
          { x: 200, y: 400 }, // 模块 3 的位置
          { x: 100, y: 200 }, // 模块 4 的位置
          { x: 200, y: 0 },  // 模块 5 的位置
          { x: 750, y: 80 },   // 模块 1 的位置
        ]
      }
      setTimeout(() => {
        this.activeInx = 0
        this.positions = [// 初始数组
          { x: 750, y: 80 },   // 模块 1 的位置
          { x: 750, y: 320 }, // 模块 2 的位置
          { x: 200, y: 400 }, // 模块 3 的位置
          { x: 100, y: 200 }, // 模块 4 的位置
          { x: 200, y: 0 },  // 模块 5 的位置
        ]
        this.timeOut = setInterval(() => {
          this.updatePositions()
        },10000)
      },10000)
    }
  },
};
</script>
<style lang="scss" scoped>
.dp-index {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/sfbg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  .sf-box{
    width: 100%;
    padding: 30px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex: 1;
    .sf-left{
      width: 60%;
      height: 540px;
      position: relative;
      .module{
        position: absolute;
        cursor: pointer;
      }
    }
    .sf-right{
      width: 35%;
      height: 80%;
      border-radius: 6px;
      background: rgba(11, 45, 87, 0.5);
      box-sizing: border-box;
      border: 2px solid #2DBDF6;
      box-shadow: inset 0px 0px 60px 0px rgba(83, 178, 255, 0.3);
      .sf-title{
        width: 100%;
        background: url('../../assets/images/sf-t.png') no-repeat;
        background-size: 100% 100%;
        height: 60px;
        line-height: 60px;
        font-size: 28px;
        color: #fff;
        padding-left: 35px;
        box-sizing: border-box;
        font-family: 'youshe';
      }
      .sf-item{
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 30px;
        box-sizing: border-box;
        margin-top: 30px;
        .sf-label{
          width:110px;
          font-size: 14px;
          color: #fff;
          margin-right: 20px;
          span{
            display: inline-block;
            width: 6px;
            height: 6px;
            background: #29FAB1;
            border-radius: 50%;
            margin-right: 10px;
          }
        }
        .sf-value{
          width: 280px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          border-radius: 4px;
          background: rgba(28, 85, 153, 0.6);
          box-sizing: border-box;
          border: 1px solid #36DEFF;
          box-shadow: inset 0px 0px 10px 0px rgba(0, 47, 65, 0.3);
          span{
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }
    }
  }
}
</style>
